<template>
  <view class="exam-detail-submitted">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }">
      <text class="time">{{ currentTime }}</text>
      <view class="status-icons">
        <text class="fa fa-signal"></text>
        <text class="fa fa-wifi"></text>
        <text class="fa fa-battery-full"></text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">考试详情</text>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="page-content">
      <!-- 考试头部 -->
      <view class="section">
        <view class="exam-header">
          <view class="header-content">
            <view class="icon-box blue">
              <text
                class="fa fa-file-text fa-2x"
                style="color: rgb(37 99 235)"
              ></text>
            </view>
            <view class="header-info">
              <text class="exam-title">医疗器械消毒规范考试</text>
              <text class="exam-time">2025.01.26 10:00 - 11:30</text>
              <view class="tags">
                <text class="tag blue">已交卷</text>
                <text class="score">88分</text>
              </view>
            </view>
            <view class="header-status">
              <text class="status-tag green">进行中</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 分数卡片 -->
      <view class="section">
        <view class="score-card">
          <view class="score-content">
            <text class="score-number">88分</text>
            <text class="score-text">优秀！考试通过</text>
            <text class="score-detail">超过及格线18分</text>
          </view>
        </view>
      </view>

      <!-- 考试信息 -->
      <view class="section">
        <view class="info-card">
          <text class="card-title">考试信息</text>
          <view class="info-list">
            <view class="info-item">
              <text class="label">题目数量</text>
              <text class="value">50题</text>
            </view>
            <view class="info-item">
              <text class="label">及格分数</text>
              <text class="value">70分</text>
            </view>
            <view class="info-item">
              <text class="label">考试时长</text>
              <text class="value">限时90分钟</text>
            </view>
            <view class="info-item">
              <text class="label">实际用时</text>
              <text class="value green">78分钟</text>
            </view>
            <view class="info-item">
              <text class="label">正确率</text>
              <text class="value green">88%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 答题情况 -->
      <view class="section">
        <view class="info-card">
          <text class="card-title">答题情况</text>
          <view class="stats-grid">
            <view class="stat-item green">
              <text class="stat-number">44</text>
              <text class="stat-label">答对</text>
            </view>
            <view class="stat-item red">
              <text class="stat-number">6</text>
              <text class="stat-label">答错</text>
            </view>
            <view class="stat-item gray">
              <text class="stat-number">0</text>
              <text class="stat-label">未答</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="action-bar">
      <button class="action-button" @tap="viewAnswers">
        <text class="button-text">👁️ 查看答案解析</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTime: "09:41",
    };
  },
  onLoad() {
    this.initStatusBar();
    this.updateTime();
  },
  methods: {
    initStatusBar() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}`;
    },
    goBack() {
      uni.navigateBack();
    },
    viewAnswers() {
      uni.navigateTo({
        url: "/pages/exam-answers/exam-answers",
      });
    },
    navigateToHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    navigateToProfile() {
      uni.switchTab({
        url: "/pages/mine/mine",
      });
    },
  },
};
</script>

<style scoped>
.exam-detail-submitted {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #9ca3af;
  background-color: #ffffff;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

.icon {
  font-size: 24rpx;
}

/* 导航栏 */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
}

.nav-back {
  position: absolute;
  left: 32rpx;
  padding: 8rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

/* 页面内容 */
.page-content {
  height: calc(100vh - 88rpx - 140rpx - 120rpx);
}

.section {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

/* 考试头部 */
.exam-header {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.header-content {
  display: flex;
  gap: 24rpx;
}

.icon-box {
  width: 128rpx;
  height: 128rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-box.blue {
  background-color: #dbeafe;
}

.icon-box .icon {
  font-size: 48rpx;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.exam-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.exam-project {
  font-size: 24rpx;
  color: #6b7280;
  margin-top: 8rpx;
}

.exam-time {
  font-size: 24rpx;
  color: #9ca3af;
}

.tags {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  font-weight: 500;
}

.tag.blue {
  background-color: #eff6ff;
  color: #1d4ed8;
}

.score {
  font-size: 22rpx;
  color: #10b981;
  font-weight: 600;
}

.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  font-weight: 500;
}

.status-tag.gray {
  background-color: #f9fafb;
  color: #374151;
}

.status-tag.green {
  background-color: #f0fdf4;
  color: #15803d;
}

/* 分数卡片 */
.score-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
  border-radius: 32rpx;
  padding: 32rpx;
  border: 1rpx solid #86efac;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.score-number {
  font-size: 64rpx;
  font-weight: 700;
  color: #059669;
}

.score-text {
  font-size: 28rpx;
  color: #047857;
  font-weight: 500;
}

.score-detail {
  font-size: 24rpx;
  color: #10b981;
}

/* 信息卡片 */
.info-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24rpx;
  display: block;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #6b7280;
}

.value {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.value.green {
  color: #10b981;
}

/* 统计网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
}

.stat-item {
  padding: 24rpx;
  border-radius: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-item.green {
  background-color: #f0fdf4;
}

.stat-item.red {
  background-color: #fef2f2;
}

.stat-item.gray {
  background-color: #f9fafb;
}

.stat-number {
  font-size: 36rpx;
  font-weight: 700;
}

.stat-item.green .stat-number {
  color: #10b981;
}

.stat-item.red .stat-number {
  color: #ef4444;
}

.stat-item.gray .stat-number {
  color: #6b7280;
}

.stat-label {
  font-size: 22rpx;
}

.stat-item.green .stat-label {
  color: #047857;
}

.stat-item.red .stat-label {
  color: #b91c1c;
}

.stat-item.gray .stat-label {
  color: #374151;
}

.bottom-space {
  height: 160rpx;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  padding: 24rpx 32rpx;
}

.action-button {
  /* width: 100%; */
  height: 88rpx;
  background: linear-gradient(to right, #16a34a, #10b981);
  border-radius: 24rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(22, 163, 74, 0.3);
  border: none;
}

.button-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}
</style>
